<template>
  <div class="main">
    <div class="title">添加副卡</div>
    <div class="sub_main">
      <div class="flex_row">
        <div class="left">主卡余额</div>
        <div>{{ data.mainAmt ? data.mainAmt.toFixed(2) : "0.00" }}元</div>
      </div>
      <div class="flex_row">
        <div class="left">副卡额度分配类型</div>
        <div>
          <van-radio-group direction="horizontal" v-model="data.cardRuleType">
            <van-radio name="1" checked-color="#07c160">共享额度</van-radio>
            <van-radio name="2" checked-color="#07c160">分配额度</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="flex_row">
        <div class="left">允许扫码次数</div>
        <div class="times">
          <van-field
            v-model="data.scanCodeNum"
            border
            placeholder="请输入允许次数"
          />
        </div>
      </div>
      <div class="flex_row" v-if="data.cardRuleType === '2'">
        <div class="left" style="width: 1.6rem">额度生效类型</div>
        <div>
          <van-radio-group
            direction="horizontal"
            v-model="data.effectiveType"
            style="height: 1rem"
          >
            <van-radio name="1" checked-color="#07c160">单次有效</van-radio>
            <van-radio name="2" checked-color="#07c160">永久有效</van-radio>
            <van-radio name="3" checked-color="#07c160">每月生效</van-radio>
          </van-radio-group>
        </div>
      </div>
      <div class="flex_row" v-if="data.cardRuleType === '2'">
        <div class="left">副卡分配金额</div>
        <div class="times">
          <van-field
            v-model="data.shareAmt"
            border
            placeholder="请输入分配金额"
          />
        </div>
      </div>
      <van-button
        :disabled="isDisabled"
        type="primary"
        round
        class="btn"
        @click="onSubmit"
        >提交</van-button
      >
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button, RadioGroup, Radio, field, Toast } from "vant";

Vue.use(Button);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(field);
Vue.use(Toast);

export default {
  head() {
    return {
      title: "添加副卡",
    };
  },
  data() {
    return {
      data: {
        shareAmt: 0,
        mainAmt: 0,
        scanCodeNum: "",
        cardRuleType: "1", //规则类型：1:共享，2:分配
        effectiveType: "1", //	额度生效类型：1:单次，2:永久, 3:每月
      },
      tempEnterpriseId: "",
      mainId: "",
    };
  },
  created() {
    this.tempEnterpriseId =
      this.$route.query.enterpriseId || sessionStorage.getItem("enterpriseId");
    this.mainId = this.$route.query.id;
    this.getData();
  },
  watch: {
    "data.cardRuleType": {
      handler(val) {
        if (val == "2" && !this.data.effectiveType) {
          this.data.effectiveType = "1";
        } else if (val == "1") {
          this.data.effectiveType = null;
          this.data.shareAmt = null;
        }
      },
    },
    "data.shareAmt": {
      handler(val) {
        if (val > this.data.mainAmt) {
          this.data.shareAmt = 0;
        }
      },
    },
  },
  computed: {
    isDisabled() {
      const rule1 = !this.data.scanCodeNum || this.data.scanCodeNum == 0;
      const rule2 = !this.data.shareAmt || this.data.shareAmt == 0;
      return this.data.cardRuleType === "1" ? rule1 : rule1 || rule2;
    },
  },

  methods: {
    async getData() {
      const res = await this.$axios.$post("/electronic/deputy/rule/get", {
        mainId: this.mainId,
      });
      this.data = res.data;
      this.data.cardRuleType ??= "1";
    },
    async onSubmit() {
      const { shareAmt, mainAmt, scanCodeNum, cardRuleType, effectiveType } =
        this.data;
      const res = await this.$axios.$post("/electronic/deputy/rule/save", {
        shareAmt,
        mainAmt,
        scanCodeNum,
        cardRuleType,
        effectiveType,
        mainId: this.mainId,
      });
      if (res.retCode === 0) {
        location.href =
        window.location.origin +
        `/${this.tempEnterpriseId}/subCard/code?ruleId=${res.data}`
        // 苹果不兼容
        // this.$router.push({
        //   path: `/${this.tempEnterpriseId}/subCard/code`,
        //   query: { ruleId: res.data },
        // });
      } else {
        Toast.fail(res.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .van-field {
  border: 2px solid #eee;
  width: 4rem;
}
.main {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.2rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  .title {
    font-size: 0.4rem;
    text-align: center;
    font-weight: 500;
    height: 1rem;
    line-height: 1rem;
  }
  .sub_main {
    // height: 55vh;
    background-color: #fff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.5rem;
    position: relative;
    .flex_row {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 1.5rem;
      .left {
        width: 1.4rem;
        margin-right: 0.3rem;
        text-align: center;
      }
    }
    .btn {
      width: 6rem;
      margin-top: 0.3rem;
    }
  }
}
</style>
